<template>
	<view class="content">
		<view class="transfer_search_wrap">
			<view class="transfer_search">
				<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/search.png" mode="aspectFit"></image>
				<input type="number" value="" @input="phones" placeholder-style="font-size:30upx;" placeholder="请输入团队成员手机号" />
			</view>
		</view>
		
		<view class="transfer_people">
			<view class="transfer_people_item">
				<radio-group @change="checkboxChange">
					<label class="card_item"  v-for="(item,index) in transfer_people" :key="index" >
						<view class="card_list">
							<view class="people_item_left">
								<view class="people_img">
									<image :src="item.avatar" mode="aspectFit"></image>
								</view>
								<view class="item_right">
									<view class="item_name">{{item.nickname}}</view>
									<view class="item_phone">{{item.mobile}}</view>
								</view>
							</view>
							<radio class="checkbox" :value="item" color="#0086ff" style="transform:scale(0.7);" />
						</view>
					</label>
					<uni-load-more :status="loadingType"></uni-load-more>
				</radio-group>
			</view>
			
		</view>
		
		<view class="interval_ransfer_bottom" @click="trans">
			<view class="interval_ransfer_btn">确认划拨</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		data() {
			return {
				ids:[],
				data:[],
				user_id:'',
				num:0,
				pageNum:1,
				limit:10,
				loadingType:"more",
				loaded:false,
				
				transfer_people:[
					// {
					// 	id:0,
					// 	people_img:'../../static/course/14.png',
					// 	item_name:'一瞬之光',
					// 	item_phone:'18729296666'
					// },{
					// 	id:1,
					// 	people_img:'../../static/course/14.png',
					// 	item_name:'一瞬之光',
					// 	item_phone:'18729296666'
					// },{
					// 	id:2,
					// 	people_img:'../../static/course/14.png',
					// 	item_name:'一瞬之光',
					// 	item_phone:'18729296666'
					// }
				],
				phone:null,
				token:''
			}
		},
		onShow(){
			var options = this.Unfold_data.getCurPageOption();
			if(options.data){
				this.data = options.data
				
				// console.log(options.data)
			}else if(options.ids){
				this.ids = options.ids
			}
			
		},
		onLoad(option){
			this.token=option.token
			this.loadData()
		},
		onReachBottom() {
			this.loadData(1);
		},
		methods: {
			//根据手机号查询我的团队列表
			phones(e){
				if(e.detail.value.length==11){
					this.phone = e.detail.value
					this.transfer_people = []
					this.pageNum = 1
					this.loadData(2)
				}else if(e.detail.value==""){
					this.transfer_people = []
					this.pageNum = 1
					this.phone=null
					this.loadData()
				}
			},
			//分页获取我的团队列表
			loadData(source){
				if (source == 0 && this.loaded) {
					return;
				}
				if (source == 1 && this.loadingType != 'more') {
					return;
				}
				this.loadingType = "loading"
				//获取我的团队列表
				let params1 = {
					page: this.pageNum,
					limit: this.limit,
					mobile:this.phone,
					token:this.token
				};
				var url1 = '/api/usercenter/user/team4transfer'
				this.Unfold_data.upload_data(params1, 'GET', url1, res => {
					// console.log('res',res);
					if (res.statusCode == 200 && res.data.code == 1) {
						this.num = res.data.data.total
						this.loadingType = "more"
						
						if (!res.data.data.rows) {
							this.loadingType = 'noMore';
						} else if (res.data.data.rows.length < this.limit) {
							
							this.loadingType = 'noMore';
							if (res.data.data.rows.length > 0) {
								this.transfer_people = this.transfer_people.concat(res.data.data.rows);
							}
						} else if (res.data.data.rows.length == this.limit) {
							if (res.data.data.rows.length > 0) {
								this.transfer_people = this.transfer_people.concat(res.data.data.rows);
							}
							this.pageNum = this.pageNum + 1;
						}
					} else if (res.statusCode == 200 && res.data.code == 401) {
						this.Unfold_data.showWindow(res.data.msg);
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			checkboxChange(e){
				// console.log('*****',e)
				this.user_id = e.detail.value.id
				
			},
			trans(){
				var p = uni.getStorageSync('par')
				// console.log('p',p)
				//判断是否是区间划拨还是，选择划拨
				if(this.ids.length>0){
					//选择划拨
					let params={
						ids:this.ids,
						user_id:this.user_id,
						token:this.token
					};
					var url = '/api/usercenter/device/transferByIds'
					this.Unfold_data.upload_data(params, 'POST', url, res => {
						// console.log('res',res);
						if (res.statusCode == 200 && res.data.code == 1) {
							this.Unfold_data.showWindow('划拨成功')
							if (res.data.code == 1) {
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/cardTransfer/cardTransfer?token='+this.token
									});
								}, 1000);
							}
						} else if (res.statusCode == 200 && res.data.code == 401) {
							this.Unfold_data.showWindow(res.data.msg);
						} else {
							this.Unfold_data.showWindow(res.data.msg);
						}
					});
				}else if(p){
					//区间划拨
					let params={
						//开始
						sn:p.sn,
						//结束
						end:p.end,
						//数量
						num:p.num,
						//user_id
						user_id:this.user_id,
						token:this.token
					};
					var url = '/api/usercenter/device/transferRange'
					this.Unfold_data.upload_data(params, 'POST', url, res => {
						// console.log('res',res);
						if (res.statusCode == 200 && res.data.code == 1) {
							this.Unfold_data.showWindow('划拨成功')
							uni.removeStorageSync('par')
							if (res.data.code == 1) {
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/cardTransfer/cardTransfer'
									});
								}, 1000);
							}
						} else if (res.statusCode == 200 && res.data.code == 401) {
							this.Unfold_data.showWindow(res.data.msg);
						} else {
							this.Unfold_data.showWindow(res.data.msg);
						}
					});
				}
				
			},
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100%;
	background: #f7f7fc;
}
.content{
	width: 100%;
	position: relative;
	padding-bottom: 100upx;
	.transfer_search_wrap{
		width: 100%;
		padding: 20upx 40upx;
		.transfer_search{
			width: 100%;
			height: 70upx;
			background-color: #FFFFFF;
			border-radius: 35upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			image{
				width: 50upx;
				height: 50upx;
			}
			input{
				padding-left: 20upx;
				font-size: 30upx;
			}
		}
	}
	.transfer_people{
		width: 100%;
		.transfer_people_item{
			width: 100%;
			background-color: #FFFFFF;
			.card_item{
				width: 100%;
				height: 140upx;
				background-color: #FFFFFF;
				border-bottom: 2upx solid #f7f7fc;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.card_list{
					width: 90%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					.people_item_left{
						flex: 9;
						display: flex;
						align-items: center;
						.people_img{
							flex: 1;
							display: flex;
							align-items: center;
							image{
								width: 80upx;
								height: 80upx;
							}
						}
						.item_right{
							flex: 4;
							.item_name{
								padding: 10upx 0;
							}
							.item_phone{
								color: #7c7c7c;
								font-size: 28upx;
							}
						}
					}
					.checkbox{
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
		}
		.bottom_con{
			width: 100%;
			padding: 20upx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #7c7c7c;
		}
	}
	.interval_ransfer_bottom{
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 40upx;
		.interval_ransfer_btn{
			width: 180upx;
			height: 70upx;
			background-color: #8973f9;
			border-radius: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
		}
	}
}
</style>
